<template>
  <section>
    <div class="detail-count-top"></div>
    <div class="detail-count">
     <div class="detail-count-con "
      v-for="(item, index) in msg"
      :key="index"
      :class="{'detail-l':index === 0, 'detail-r':index === msg.length-1, 'detail-count-con-active': index % 2 == 1}">
        <div class="detail-count-con-t1">{{item.indicatorName}}</div>
        <div class="detail-count-con-t2">{{item.value + item.measurement}}</div>
        <div class="detail-count-con-t3">{{item.updateTime | format}}</div>
      </div>
    </div>

     <div class="detail-count-bot"></div>
  </section>
</template>

<script>
import { getDate } from '../../../../api/unit.js'
export default {
  props: {
    msg: Array
  },
  data () {
    return {

    }
  },
  filters: {
    format: function (value) {
      return getDate(value).dTime
    }
  },

  methods: {

  }
}
</script>

<style scoped>
.box::-webkit-scrollbar{
    display: none;
}
.detail-count{
  /*display: flex;*/
    /*flex-wrap: nowrap;*/
  /*justify-content: center;*/
  margin: 28px 29px 18px;
  width:718px;
  /*box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
  font-size: 24px;
    white-space: nowrap;
    overflow-y: auto;
    /*border-radius: 10px;*/
}
.detail-count-con{
    display: inline-block;
  width:172.5px;
  height:125px;
  background:linear-gradient(0deg,rgba(0,186,255,1),rgba(255,255,255,1));
    text-align: center;
    padding-bottom: 22px;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
  /* padding-bottom: 22px; */
}
.detail-count-con-active{
  background:linear-gradient(0deg,rgba(158,229,255,1),rgba(255,255,255,1));
}
.detail-l{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.detail-r{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.detail-count-con-t1{
  margin-top: 12px;
  margin-bottom: 21px;
  font-size: 24px;
}
.detail-count-con-t2{
  font-size: 34px;
   color: #4d4d4d;
  font-weight: bold;
}
.detail-count-con-t3{
   margin-top: 8px;
  font-size: 20px;
   margin-bottom: 22px;

}
.detail-count-top{
  height: 10px;
  background: #e5e5e5;
  width: 750px;
}

.detail-count-bot{
  height: 15px;
  background: #e5e5e5;
  width: 750px;
}
</style>
